<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>员工申请</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/css/bootstrap.min.css">

<!-- FontAwesome CSS -->
<link rel="stylesheet" href="css/css/font-awesome.min.css">

<!-- ElegantFonts CSS -->
<link rel="stylesheet" href="css/css/elegant-fonts.css">

<!-- themify-icons CSS -->
<link rel="stylesheet" href="css/css/themify-icons.css">

<!-- Swiper CSS -->
<link rel="stylesheet" href="css/css/swiper.min.css">

<!-- Styles -->
<link rel="stylesheet" href="style.css">

<script src="js/jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>

<style>
.x-right {
	width: 160px;
}

#ref {
	width: 250px;
}
</style>
</head>
<style>
/* Make the image fully responsive */
.carousel-inner img {
	width: 100%;
	height: 100%;
}
</style>
</head>
<style>
.site-navigation ul li a {
	padding: 12px 30px;
}
</style>
<body class="courses-page">

	<c:if test="${pd==null}">
		<c:redirect
			url="PerCourseServlet?op=showPerCourseByManager&deptNo=${sessionScope.deptNo}"></c:redirect>
	</c:if>


	<div class="page-header">
		<header class="site-header">
			<div class="top-header-bar">
				<div class="container-fluid">
					<div class="row"></div>
					<!-- .row -->
				</div>
				<!-- .container-fluid -->
			</div>
			<!-- .top-header-bar -->

			<div class="nav-bar">
				<div class="container">
					<div class="row">
						<div class="col-9 col-lg-3">
							<div class="site-branding">
								<h1 class="site-title">
									<a href="index.html" rel="home">Emp<span>Training</span></a>
								</h1>
							</div>
							<!-- .site-branding -->
						</div>
						<!-- .col -->

						<div
							class="col-3 col-lg-9 flex justify-content-end align-content-center">
							<nav
								class="site-navigation flex justify-content-end align-items-center">
								<ul style="overflow: inherit;"
									class="flex flex-column flex-lg-row justify-content-lg-end align-content-center">
									<li><a href="DeptMain.jsp">我的主页</a></li>
									<li><a href="DeptCoursesShow.jsp">课程浏览</a></li>
									<li><a href="course-add.jsp">部门申请</a></li>
									<li class="current-menu-item"><a href="emp-apl.jsp">员工申请</a></li>
									<li><a href="reftable.jsp">参培员工</a></li>
									<li><a href="DeptScore.jsp">员工成绩</a></li>
									<li>
										<div class="dropdown">
											<a href="my-information.html" class="dropbtn">个人中心 <span
												id="down" class="fa fa-caret-down"
												style="margin-left: 10px; display: block;"></span> <span
												id="up" class="fa fa-caret-up"
												style="margin-left: 10px; display: none;"></span>
											</a>
											<div class="dropdown-content">
												<a href="DeptInfo.jsp">个人信息</a> <a href="#" id="Logout">退出登录</a>
											</div>
										</div>
									</li>



								</ul>

							</nav>
							<!-- .site-navigation -->
						</div>
						<!-- .col -->
					</div>
					<!-- .row -->
				</div>
				<!-- .container -->
			</div>
			<!-- .nav-bar -->
		</header>
		<!-- .site-header -->

		<div class="page-header-overlay">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<header class="entry-header">
							<h1>员工申请的课程</h1>
						</header>
						<!-- .entry-header -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .page-header-overlay -->
	</div>
	<!-- .page-header -->

	<div class="container">
		<section class="featured-courses horizontal-column courses-wrap">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<header
							class="heading flex justify-content-between align-items-center">
							<h2 id="ref">员工申请列表</h2>

							<form class="layui-form x-center"
								action="PerCourseServlet?op=showPerCourseByManager"
								method="post" style="width: 840px">
								<input type="hidden" name="deptNo" autocomplete="off"
									id="deptNo" value="${sessionScope.deptNo}">
								<div class="layui-form-pane"
									style="margin-top: 15px; margin-right: 15px;">
									<div class="layui-form-item">
										<div class="layui-input-inline">
											<input type="text" name="empNo" placeholder="请输入员工号"
												id="empNo" autocomplete="off" class="layui-input" value="<%=request.getParameter("empNo")==null?"":request.getParameter("empNo")%>">

										</div>

										<div class="layui-input-inline" style="width: 50px">
											<button class="layui-btn" type="submit" lay-submit=""
												lay-filter="sreach">
												<i class="layui-icon">&#xe615;</i>
											</button>
										</div>
									</div>
								</div>
							</form>
							<span class="x-right" style="line-height: 40px">共有数据：<span
								class="layui-badge">${pd.totalCount}</span> 条
							</span> <a class="layui-btn layui-btn-small"
								style="line-height: 1.6em; margin-top: 3px; float: right"
								href="javascript:location.replace('PerCourseServlet?op=showPerCourseByManager&deptNo=${sessionScope.deptNo}');"
								title="刷新"><i class="layui-icon" style="line-height: 30px">ဂ</i></a>
						</header>
						<!-- .heading -->
					</div>
					<!-- .col -->





					<table class="layui-table">

						<thead>
							<tr>
								<th>个人申请编号</th>
								<th>员工编号</th>
								<th>员工姓名</th>
								<th>计划课程编号</th>
								<th>课程编号</th>
								<th>申请时间</th>
								<th>操作时间</th>
								<th>申请状态</th>
								<th>操作</th>
							</tr>
						</thead>

						<!-- 判断是否为空 -->
						<c:if test="${pd!=null}">
							<!-- 遍历 -->
							<c:forEach items="${pd.data}" var="percourse">
								<tbody id="x-img">
									<tr>
										<td>${percourse.percourseNo}</td>
										<td>${percourse.empNo}</td>
										<td>${percourse.eName}</td>
										<td>${percourse.cpNo}</td>
										<td>${percourse.cName}</td>
										<td>${percourse.applyTime}</td>
										<td>${percourse.passTime}</td>

										<td class="td-status"><c:if
												test="${percourse.applyState==1}">
												<span class="layui-btn layui-btn-normal ">申请已通过</span>
											</c:if> <c:if test="${percourse.applyState==2}">
												<span class="layui-btn layui-btn-danger ">申请未通过</span>
											</c:if> <c:if test="${percourse.applyState==0}">
												<span class="layui-btn layui-btn-warm ">正在申请中</span>
											</c:if></td>




										<td class="td-manage"><c:if
												test="${percourse.applyState==1}">
												<a style="text-decoration: none"
													onclick="member_stop(this,'10001')" href="javascript:;"
													title="不通过申请"> <i class="layui-icon">&#xe601;</i>
												</a>
											</c:if> <c:if test="${percourse.applyState==0}">
												<a style="text-decoration: none"
													onclick="member_start(this,'10001')" href="javascript:;"
													title="通过申请"> <i class="layui-icon">&#xe601;</i>
												</a>
												<a style="text-decoration: none"
													onclick="member_stop(this,'10001')" href="javascript:;"
													title="不通过申请"> <i class="layui-icon">&#xe601;</i>
												</a>
											</c:if> <c:if test="${percourse.applyState==2}">
												<a style="text-decoration: none"
													onclick="member_start(this,'10001')" href="javascript:;"
													title="通过申请"> <i class="layui-icon">&#xe601;</i>
												</a>
											</c:if> <!--<c:if test="${percourse.applyState==2}">
												<a style="text-decoration: none"
													onclick="member_start(this,'10001')" href="javascript:;"
													title="通过申请"> <i class="layui-icon">&#xe601;</i>
												</a>
											</c:if> --></td>
									</tr>
								</tbody>
							</c:forEach>
						</c:if>

					</table>
					<div id="page"></div>
				</div>
			</div>
	</div>

	<!-- .container -->
	<footer class="site-footer">
		<div class="footer-widgets">
			<div class="container">
				<div class="row">
					<div class="col-12 col-md-6 col-lg-3">
						<h2 class="w-100">版权</h2>
						<div class="foot-about">
							<p class="footer-copyright">版权所有:bug总和我作队</p>
						</div>
						<!-- .foot-about -->
					</div>
					<!-- .col -->
					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-md-0">
						<div class="foot-contact">
							<h2>联系我们</h2>

							<ul>
								<li>电子邮件：1727283192@qq.com</li>
								<li>电话：17606064136</li>
								<li>地址：福建省厦门市</li>
							</ul>
						</div>
						<!-- .foot-contact -->
					</div>
					<!-- .col -->

					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-lg-0">
						<div class="quick-links flex flex-wrap">
							<h2 class="w-100">快速连接</h2>

							<ul class="w-50">
								<li><a href="about.html">关于 </a></li>
								<li><a href="#">使用条款</a></li>
								<li><a href="#">隐私政策 </a></li>
								<li><a href="#">联系我们</a></li>
							</ul>

						</div>
						<!-- .quick-links -->
					</div>
					<!-- .col -->

					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-lg-0">
						<div class="follow-us">
							<h2>关注我们的动向</h2>
							<img src="images/erweima.png">
						</div>
						<!-- .quick-links -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .footer-widgets -->

	</footer>
	<input type="hidden" value="${sessionScope.deptNo}" id="getdeptNo">
	<script type='text/javascript' src='js/js/jquery.js'></script>
	<script type='text/javascript' src='js/js/swiper.min.js'></script>
	<script type='text/javascript' src='js/js/masonry.pkgd.min.js'></script>
	<script type='text/javascript' src='js/js/jquery.collapsible.min.js'></script>
	<script type='text/javascript' src='js/js/custom.js'></script>

	<script src="layui/layui.all.js" charset="utf-8"></script>
	<script src="js/x-layui.js" charset="utf-8"></script>
	<script>
	var deptNo = $("#getdeptNo").val();
	
	layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage,
		  layer = layui.layer;
		  var empNo = $("#empNo").val();
			 console.log("empNo:"+empNo);
		 
		laypage.render({
			elem : 'page',
			theme:'#00BFFF',
			count : ${pd.totalCount},//数据总数，从服务端得到
			curr:${pd.page},//得到当前页，以便向服务端请求对应页的数据。
			limit : ${pd.pageSize},//得到每页显示的条数
			layout : ['prev', 'page', 'next' ],
			jump : function(obj,first) {
				 //obj包含了当前分页的所有参数，
				//首次不执行
			    if(!first){

			    	location.href = "PerCourseServlet?op=showPerCourseByManager&page="
						+ obj.curr+"&empNo="+empNo+"&deptNo="+deptNo;
			    }
			}
		});
		
		});
	
	
	function member_stop(obj, id) {
		layer.confirm(
						'确认不通过申请吗？',
						function(index) {
							//发异步把用户状态进行更改
							$(obj)
										.parents("tr")
										.find(".td-manage")
										.prepend(
												'<a style="text-decoration:none" onClick="member_start(this,id)" href="javascript:;" title="通过申请"><i class="layui-icon">&#xe62f;</i></a>');
							var currentRow=$(obj).closest("tr");
							var perCourseNo=currentRow.find("td:eq(0)").text();
							var empNo = currentRow.find("td:eq(1)").text();
							var cpNo = currentRow.find("td:eq(3)").text();
							$.ajax({
								type : "post",
								url : "PerCourseServlet",
								data : {perCourseNo : perCourseNo,op: "refusePerCourse",empNo:empNo,cpNo:cpNo},
								dataType : "json",
								success : function(data){
									if(data == true){
										
										$(obj)
										.parents("tr")
										.find(".td-status")
										.html(
												//'<span class="layui-btn layui-btn-normal layui-btn-mini">申请未通过</span>');
							'<span class="layui-btn layui-btn-danger layui-btn-mini">申请未通过</span>');
										window.location.reload()		
								$(obj).remove();
								
								layer.msg('申请未通过!', {
									icon : 5,
									time : 1000
								});
									}
									}
								});
							
						});
	}

	/*申请通过*/
	function member_start(obj, id) {
		layer
				.confirm(
						'确认通过申请吗？',
						function(index) {
							//发异步把用户状态进行更改
							$(obj)
									.parents("tr")
									.find(".td-manage")
									.prepend(
											'<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="不通过申请"><i class="layui-icon">&#xe601;</i></a>');
							
							var currentRow=$(obj).closest("tr");
							var perCourseNo=currentRow.find("td:eq(0)").text();
							var empNo = currentRow.find("td:eq(1)").text();
							var cpNo = currentRow.find("td:eq(3)").text();
							$.ajax({
								type : "post",
								url : "PerCourseServlet",
								data : {perCourseNo : perCourseNo,op: "passPerCourse",empNo:empNo,cpNo:cpNo},
								dataType : "json",
								success : function(data){
									if(data == true) {
										$(obj)
										.parents("tr")
										.find(".td-status")
										.html(
												'<span class="layui-btn layui-btn-normal layui-btn-mini">申请已通过</span>');
								$(obj).remove();
								window.location.reload()
								layer.msg('申请通过!', {
									icon : 6,
									time : 1000
								});
									}
								}
							});
							
							
						});
	}
	</script>
	<!--退出登录-->
	<script>
		layui.use([ 'layer' ],function() {
			$ = layui.jquery;//jquery
			layer = layui.layer;//弹出层
			$("#Logout").click(function() {
					layer.confirm('确认要退出登录吗？',function(index) {
						$.ajax({
							url : "LoginServlet",
							type : "get",
							data : {
								op1:"logout"
							},
							success : function(data) {
								if (data.code == 1) {
									location.href = "http://localhost:8080/EmpTrainingTest/Login.jsp";
									return false;
								} 
							},
							dataType : "json"
						});	
					});
				});
			});
	</script>

</body>
</html>
